<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>音乐家Vue3</title>
    <script src="https://unpkg.com/vue@3"></script>
    <!-- import CSS -->
    <link rel="stylesheet" href="index.css" />
    <!-- import JavaScript -->
    <script src="https://unpkg.com/element-plus"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>
      .mstable {
        width: 100%;
        border: 2px solid red;
      }
    </style>
  </head>

  <body>
    <div id="app">
      <el-button>Hello Element Plus</el-button>
      <div class="mstable">
        <el-table :data="list" style="width: 100%">
          <el-table-column prop="name" label="原名" />
          <el-table-column prop="namecn" label="中文名" />
          <el-table-column prop="nationality" label="国籍" />
          <el-table-column prop="mainworks" label="主要作品" />
          <el-table-column prop="dateofbirth" label="出生日期" />
          <el-table-column prop="dateofdeath" label="去世日期" />
        </el-table>
      </div>

      <div>
        <div v-for="item in list">
          <span>{{ item.name}}</span>-- <span>{{ item.namecn}}</span>--
          <span>{{ item.nationality}}</span>--
          <span>{{ item.mainworks}}</span>--
          <span>{{ item.dateofbirth}}</span>--
          <span>{{ item.dateofdeath}}</span>
          <hr />
        </div>
      </div>
      <div>原名：<input type="text" v-model="name" /></div>
      <div>中文名：<input type="text" v-model="namecn" /></div>
      <div>国籍：<input type="text" v-model="nationality" /></div>
      <div>
        主要作品：<textarea
          name=""
          id=""
          cols="30"
          rows="10"
          v-model="mainworks"
        ></textarea>
      </div>
      <div>出生日期：<input type="date" v-model="dateofbirth" /></div>
      <div>去世日期：<input type="date" v-model="dateofdeath" /></div>
      <div>
        <button @click="submit">提交</button>
      </div>
    </div>
    <script>
      const App = {
        data() {
          return {
            list: [],
            name: "",
            namecn: "",
            nationality: "",
            mainworks: "",
            dateofbirth: null,
            dateofdeath: null,
          };
        },
        mounted() {
          this.loadMessage();
        },
        methods: {
          loadMessage() {
            axios.get("/musicians/list").then(
              function (response) {
                console.log(response);
                this.list = response.data;
              }.bind(this)
            );
          },
          refreshinput() {
            this.name = "";
            this.namecn = "";
            this.nationality = "";
            this.mainworks = "";
            this.dateofbirth = null;
            this.dateofdeath = null;
          },
          submit() {
            // console.log(this.dateofbirth, this.dateofdeath);
            axios
              .post("/musicians/add", {
                name: this.name,
                namecn: this.namecn,
                nationality: this.nationality,
                mainworks: this.mainworks,
                dateofbirth: this.dateofbirth,
                dateofdeath: this.dateofdeath,
              })
              .then(function (response) {
                console.log("response", response);
              })
              .catch(function (error) {
                console.log(error);
              });
            this.loadMessage();
            this.refreshinput();
          },
        },
      }
      const app = Vue.createApp(App);
      app.use(ElementPlus);
      app.mount("#app");
      // Vue.createApp({
      //   data() {
      //     return {
      //       list: [],
      //       name: "",
      //       namecn: "",
      //       nationality: "",
      //       mainworks: "",
      //       dateofbirth: null,
      //       dateofdeath: null,
      //     };
      //   },
      //   mounted() {
      //     this.loadMessage();
      //   },
      //   methods: {
      //     loadMessage() {
      //       axios.get("/musicians/list").then(
      //         function (response) {
      //           console.log(response);
      //           this.list = response.data;
      //         }.bind(this)
      //       );
      //     },
      //     refreshinput() {
      //       this.name = "";
      //       this.namecn = "";
      //       this.nationality = "";
      //       this.mainworks = "";
      //       this.dateofbirth = null;
      //       this.dateofdeath = null;
      //     },
      //     submit() {
      //       // console.log(this.dateofbirth, this.dateofdeath);
      //       axios
      //         .post("/musicians/add", {
      //           name: this.name,
      //           namecn: this.namecn,
      //           nationality: this.nationality,
      //           mainworks: this.mainworks,
      //           dateofbirth: this.dateofbirth,
      //           dateofdeath: this.dateofdeath,
      //         })
      //         .then(function (response) {
      //           console.log("response", response);
      //         })
      //         .catch(function (error) {
      //           console.log(error);
      //         });
      //       this.loadMessage();
      //       this.refreshinput();
      //     },
      //   },
      // })
      //   .use(ElementPlus)
      //   .mount("#app");
    </script>
  </body>
</html>
